<template>
    <div class="home">
        欢迎你管理员，可以开工了11
        <!--间隔
        axios
        env变量的测试
            .env 全部都会识别，但是node_modules/@vue/cli-service/lib/Service.js 这个有判断 product和test环境， 默认是development
        所以需要对pre单独添加一个NODE_ENV=pre的配置-->

        <div>
            env: {{ env }} <br>
            api: {{ api }}
        </div>

        <div class="test fl fz14">
            <span class="iconfont icon-copy"></span>dfsdf
        </div>
  </div>
</template>

<script>
export default {
    name: 'home',
    data () {
        return {
            list: '',
            env: process.env.NODE_ENV
            // api: process.env.VUE_APP_API
        }
    },
    computed: {
        api: function () {
            console.log(this)
            let api = ''
            switch (this.env) {
                case 'development':
                    api = process.env.VUE_APP_API_DEV
                    break
                case 'test':
                    api = process.env.VUE_APP_API_TEST
                    break
                case 'pre':
                    api = process.env.VUE_APP_API_PRE
                    break
                case 'production':
                    api = process.env.VUE_APP_API_PROD
                    break
            }

            return api
        }
    },
    mounted () {
        this.axios.get('/api/web/banner').then(function (res) {
            let datas = res.data
            this.list = datas
        }).catch(function (err) {
            console.log('send error', err)
        })
    }
}
</script>

<style lang="scss">
    .home{
        /*background: url($CDN_PATH+'/aa.jpg');*/
        background: url(#{$CDN_PATH}/aa.jpg);
    }

    .test{
        color: $c-main;
        background: url(//www/baidu.com/#{$env}/aa.jpg);
        @include ellipsis;
        width: widthFn(3);
    }
</style>
